<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>样式与动画</title>
</head>
<body>
    <script>
        function css() {
            $(document).css('property');
        }

        function multiCss() {
            $(document).css(['property1', 'property-2']);
        }

        function setcss() {
            $(document).css('property', 'value');
            $(document).css({ property1: 'value1', 'property-2': 'value2' });
        }

        function incrementUnfinished() {
            $(document).ready(function () {
                $('#switcher-large').click(function () {

                });
            })
        }

        function incrementGetFontSize() {
            $(document).ready(function () {
                var $speech = $('div.speech');
                $('#switcher-large').click(function () {
                    var num = parseInt($speech.css('fontSize'));
                });
            });
        }

        function increment() {
            $(document).ready(function () {
                var $speech = $('div.speech');
                $('#switcher-large').click(function () {
                    var num = parseInt($speech.css('fontSize'));
                    num *= 1.4;
                    $speech.css('fontSize', num + 'px');
                });
            });
        }

        function incrementOrDecrement() {
            $(document).ready(function () {
                var $speech = $('div.speech');
                $('#switcher button').click(function () {
                    var num = parseFloat($speech.css('fontSize'));
                    if (this.id == 'switcher-large') {
                        num *= 1.4;
                    } else if (this.id == 'switcher-small') {
                        num /= 1.4;
                    }
                    $speech.css('fontSize', num + 'px');
                });
            });
        }

        function largerOrSmaller() {
            $(document).ready(function () {
                var $speech = $('div.speech');
                var defaultSize = $speech.css('fontSize');
                $('#switcher button').click(function () {
                    var num = parseFloat($speech.css('fontSize'));
                    switch (this.id) {
                        case 'switcher-large':
                            num *= 1.4;
                            break;
                        case 'switcher-small':
                            num /= 1.4;
                            break;
                        default:
                            num = parseFloat(defaultSize);
                    }
                    $speech.css('fontSize', num + 'px');
                });
            });
        }

        function hide() {
            $(document).ready(function () {
                $('p').eq(1).hide();
            });
        }

        function show() {
            $(document).ready(function () {
                $('p').eq(1).hide();
                $('a.more').click(function (e) {
                    e.preventDefault();
                    $('p').eq(1).show();
                    $(this).hide();
                });
            });
        }

        function slow() {
            $(document).ready(function () {
                $('p').eq(1).hide();
                $('a.more').click(function (e) {
                    e.preventDefault();
                    $('p').eq(1).show('slow');
                    $(this).hide();
                });
            });
        }

        function fadeIn() {
            $('p').eq(1).hide();
            $('a.more').click(function (e) {
                e.preventDefault();
                $('p').eq(1).fadeIn('slow');
                $(this).hide();
            });
        }

        function slideDown() {
            $(document).ready(function () {
                $('p').eq(1).hide();
                $('a.more').click(function (e) {
                    e.preventDefault();
                    $('p').eq(1).slideDown('slow');
                    $(this).hide();
                });
            });
        }

        function visiable() {
            $(document).ready(function () {
                var $firstPara = $('p').eq(1);
                $firstPara.hide();
                $('a.more').click(function (e) {
                    e.preventDefault();
                    if ($firstPara.is(':hidden')) {
                        $firstPara.fadeIn('slow');
                    } else {
                        $firstPara.fadeOut('slow');
                        $(this).text('read more');
                    }
                });
            });
        }

        function toggle() {
            $(document).ready(function () {
                var $firstPara = $('p').eq(1);
                $firstPara.hide();
                $('a.more').click(function (e) {
                    e.preventDefault();
                    $firstPara.slideToggle('slow');
                    var $link = $(this);
                    if ($link.text() == 'read more') {
                        $link.text('read less');
                    } else {
                        $link.text('read more');
                    }
                });
            });
        }

        function animation() {
            var duration = 100;
            var easing = 'slow';
            $.animate({ property1: 'value1', property2: 'value2' }, duration, easing, function () {
                alert('The animation is finished.');
            });

            var properties = {
                property1: 'value1',
                property2: 'value2'
            };
            var callback = function () {

            };
            var options = {
                duration: 'value',
                easing: 'value',
                specialEasing: {
                    property1: 'easing1',
                    property2: 'easing2'
                },
                complete: function () {
                    alert('The animation is finished.');
                },
                queue: true,
                step: callback
            };
            $.animate(properties, options);
        }

        function customAnimation() {
            $(document).ready(function () {
                var $firstPara = $('p').eq(1);
                $firstPara.hide();
                $('a.more').click(function (e) {
                    e.preventDefault();
                    $firstPara.animate({
                        opacity: 'toggle',
                        height: 'toggle'
                    }, 'slow');
                    var $link = $(this);
                    if ($link.text() == 'read more') {
                        $link.text('read less');
                    } else {
                        $link.text('read more');
                    }
                });
            });
        }

        function cssAnimation() {
            $(document).ready(function () {
                var $speech = $('div.speech');
                var defaultSize = $speech.css(function () {
                    var num = parseFloat($speech.css('fontSize'));
                    switch (this.id) {
                        case 'swithcer-large':
                            num *= 1.4;
                            break;
                        case 'swithcer-small':
                            num /= 1.4;
                            break;
                        default:
                            num = parseFloat(defaultSize);
                    }
                    $speech.animate({ fontSize: num + 'px' }, 'slow');
                });
            });
        }

        function outerWidthAnimation() {
            $(document).ready(function () {
                $('div.label').click(function () {
                    var paraWidth = $('div.speech p').outerWidth();
                    var $switcher = $(this).parent();
                    var switcherWidth = $switcher.outerWidth();
                    $switcher.animate({
                        borderWidth: '5px',
                        left: paraWidth - switcherWidth,
                        height: '+=20px'
                    }, 'slow');
                });
            });
        }

        function relative() {
            $(document).ready(function () {
                $('div.label').click(function () {
                    var paraWidth = $('div.speech p').outerWidth();
                    var $switcher = $(this).parent();
                    var switcherWidth = $switcher.outerWidth();
                    $switcher
                        .css({ position: 'relative' })
                        .animate({
                            borderWidth: '5px',
                            left: paraWidth - switcherWidth,
                            height: '+=20px'
                        });
                });
            });
        }

        function queue() {
            $(document).ready(function () {
                $('div.label').click(function () {
                    var paraWidth = $('div.speech p').outerWidth();
                    var $switcher = $(this).outerWidth();
                    var switcherWidth = $switcher.outerWidth();
                    $switcher
                        .css({ position: 'relative' })
                        .animate({ left: paraWidth - switcherWidth }, 'slow')
                        .animate({ height: '+=20px' }, 'slow')
                        .animate({ borderWidth: '5px' }, 'slow');
                });
            });
        }

        function comboQueueAnimation() {
            $(document).ready(function () {
                $('div.label').click(function () {
                    var paraWidth = $('div.speech p').outerWidth();
                    var $switcher = $(this).parent();
                    var switcherWidth = $switcher.outerWidth();
                    $switcher
                        .css({ position: 'relative' })
                        .fadeTo('fast', .5)
                        .animate({ left: paraWidth - switcherWidth }, 'slow')
                        .fadeTo('slow', 1.0)
                        .slideUp('slow')
                        .slideDown('slow')
                });
            });
        }

        function notQueue() {
            $(document).ready(function () {
                $('div.label').click(function () {
                    var paraWidth = $('div.speech p').outerWidth();
                    var $switcher = $(this).parent();
                    var swithcerWidth = $switcher.outerWidth();
                    $switcher
                        .css({ position: 'relative' })
                        .fadeTo('falst', .5)
                        .animate({
                            left: paraWidth - swithcerWidth
                        }, {
                                duration: 'slow',
                                queue: false
                            })
                        .fadeTo('slow', 1.0)
                        .slideUp('slow')
                        .slideDown('slow');
                });
            });
        }

        function manualQueueUnfinished() {
            $(document).ready(function () {
                $('div.label').click(function () {
                    var paraWidth = $('div.speech p').outerWidth();
                    var $switcher = $(this).parent();
                    var switcherWidth = $switcher.outerWidth();
                    $switcher
                        .css({ position: 'relative' })
                        .fadeTo('fast', .5)
                        .animate({
                            left: paraWidth - switcherWidth
                        }, {
                                duration: 'slow',
                                queue: false
                            })
                        .fadeTo('slow', 1.0)
                        .slideUp('slow')
                        .css({ backgroundColor: '#f00' })
                        .slideDown('slow')
                });
            });
        }

        function manualQueue() {
            $(document).ready(function () {
                $('div.label').click(function () {
                    var paraWidth = $('div.speech p').outerWidth();
                    var $switcher = $(this).parent();
                    var switcherWidth = $switcher.outerWidth();
                    $switcher
                        .css({ position: 'relative' })
                        .fadeTo('fast', .5)
                        .animate({
                            left: paraWidth - switcherWidth
                        }, {
                                duration: 'slow',
                                queue: false
                            })
                        .fadeTo('slow', 1.0)
                        .slideUp('slow')
                        .queue(function (next) {
                            $switcher.css({ backgroundColor: '#f00' });
                            next();
                        })
                        .slideDown('slow');
                });
            });
        }

        function eq() {
            $(document).ready(function () {
                $('p').eq(2).css('border', 'thin solid #333');
                $('p').eq(3).css('backgroundColor', '#ccc').hide();
            });
        }

        function multipleGroupAnimation() {
            $(document).ready(function () {
                $('p')
                    .eq(2)
                    .css('border', 'thin solid #333')
                    .click(function () {
                        $(this).slideUp('slow').next().slideDown('slow');
                    });
                $('p').eq(3).css('backgroundColor', '#ccc').hide();
            });
        }

        function thisObject() {
            $(document).ready(function () {
                $('p')
                    .eq(2)
                    .css('border', 'thin solid #333')
                    .click(function () {
                        $(this).next().slideDown('slow', function () {
                            $(this).slideUp('slow');
                        });
                    });
                $('p').eq(3).css('backgroundColor', '#ccc').hide();
            });
        }

        function clickedItem() {
            $(document).ready(function () {
                $('p')
                    .eq(2)
                    .css('border', 'thin solid #333')
                    .click(function () {
                        var $clickedItem = $(this);
                        $clickedItem
                            .next()
                            .slideDown('slow', function () {
                                $clickedItem.slideUp('slow');
                            });
                    });
                $('p').eq(3).css('backgroundColor', '#ccc').hide();
            });
        }

        function callback() {
            $(document).ready(function () {
                $('div.label').click(function () {
                    var paraWidth = $('div.speech p').outerWidth();
                    var $switcher = $(this).parent();
                    var switcherWidth = $switcher.outerWidth();
                    $switcher
                        .css({ position: 'relative' })
                        .fadeTo('fast', .5)
                        .animate({
                            left: paraWidth - switcherWidth
                        }, {
                                duration: 'slow',
                                queue: false
                            })
                        .fadeTo('slow', 1.0)
                        .slideUp('slow', function () {
                            $switcher.css({ backgroundColor: '#f00' });
                        })
                        .slideDown('slow');
                });
            });
        }
    </script>
</body>
</html>